<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的待办事项</title>
    <link rel="stylesheet" href="css/MyToDos.css">
    <link rel="icon" href="png/MyToDos_icon.jpg">
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div class="container">
        <div class="icon_LU">
            <div class="icon_LU icon_LU1">O</div>
            <div class="icon_LU icon_LU2">L</div>
        </div>
        <h1 class="title">MyToDos</h1>
        <fieldset class="mainItem">
            <legend class="subTittle">办事事项管理助手</legend>
            <label class="inputs">
                <input @keydown.enter="appendItem" placeholder="请输入待办事项" class="input" v-model="input">
                <input @click="appendItem" type="button" value="添加" class="operation inputButton addButton">
            </label>
            <div class="li" v-show="showTyped['all']">
                <b>{{showType['all']}}:</b>
                <ol>
                    <li v-for="i in toDos">
                        <label :style="{'text-decoration-line': !i.state? 'line-through':''}">
                            <input type="checkbox" :checked="!i.state" @change="changeF(i.id)">{{i.content}}
                        </label>
                        <div @click="delOne(i.id)" class="del">X</div>
                    </li>
                </ol>
            </div>
            <div class="li" v-show="showTyped['isActive']">
                <b>{{showType['isActive']}}:</b>
                <ol>
                    <li v-for="i in toDos" v-show="i.state">
                        <label :style="{'text-decoration-line': !i.state? 'line-through':''}">
                            <input type="checkbox" :checked="!i.state" @change="changeF(i.id)">{{i.content}}
                        </label>
                        <div @click="delOne(i.id)" class="del">X</div>
                    </li>
                </ol>
            </div>
            <div class="li" v-show="showTyped['isCompleted']">
                <b>{{showType['isCompleted']}}:</b>
                <ol>
                    <li v-for="i in toDos" v-show="!i.state">
                        <label :style="{'text-decoration-line': !i.state? 'line-through':''}">
                            <input type="checkbox" :checked="!i.state" @change="changeF(i.id)">{{i.content}}
                        </label>
                        <div @click="delOne(i.id)" class="del">X</div>
                    </li>
                </ol>
            </div>
            <div class="inputs1">
                <div>
                    <div style="display: unset"
                         v-show="showTyped['all']">
                        剩余{{notDoneCount}}项
                    </div>
                    <div style="display: unset"
                         v-show="!showTyped['all']">
                        共有{{total}}项
                    </div>
                    <input v-for="(i,key,index) in showType"
                           :class="showTyped[key]?'pressed':''"
                           @click="showTypeF(key,index)" type="button"
                           :value="i" class="operation inputButton">
                    <input type="button" v-show="(total-notDoneCount>0)&&
                           (showTyped['all']||showTyped['isActive']||showTyped['isCompleted'])"
                           value="清除已完成" class="operation inputButton"
                           @click="clearDone">
                </div>
            </div>
        </fieldset>
    </div>
<!--    {{toDos}}<br><br>{{input}}<br><br>{{showTyped}}<br><br>-->
<!--    {{itemArray}}<br><br>-->
</div>
<script src="js/apps/MyToDos.js"></script>
</body>
</html>